import React from 'react'
import styles from './index.module.css'
import {Checkbox} from "antd-mobile";
import cart1 from "../../../assets/cart1.jpg";
import Btn from '../../../components/btn'
import Nav from '../../../components/nav'
import request from "../../../utils/request";

const CheckboxItem = Checkbox.CheckboxItem;
const ListItem: React.FC<{ item: collect, selectIds: number[], checkChange: any }> = ({item, selectIds, checkChange}) => {
    return (
        <div style={{
            display: 'flex',
            padding: '10px 0',
            backgroundColor: 'white'

        }}>
            <CheckboxItem checked={selectIds.includes(item.id)} onChange={checkChange}/>
            <img src={item.productImage} alt=""/>
            <div style={{
                padding: '2px 0 2px 10px',
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'space-around',
            }}>
                <b>{item.productName}</b>
                <div style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'center'
                }}>
                    <b style={{marginRight: '10px'}}>¥{item.productPrice}</b>
                </div>
            </div>
        </div>
    );
};

interface collect {
    id: number,
    productId: number,
    productName: string,
    productImage: string,
    productPrice: number,
}

interface State {
    collectList: collect[],
    selectIds: number[],
}

class Index extends React.Component {
    state: State = {
        collectList: [],
        selectIds: [],
    };
    rmCollect = () => {
        const {selectIds, collectList} = this.state;
        const newCollectList: collect[] = [];
        collectList.forEach((item) => {
            if (!selectIds.includes(item.id)) {
                newCollectList.push(item);
            }
        });
        this.setState({
            collectList: newCollectList,
            selectIds: []
        });
    };

    componentDidMount() {
        request('/mine/collect').then((result) => {
            const {collectList} = result.data;
            this.setState({collectList})
        });
    }

    checkboxChange = (e: any, item: collect) => {
        const {selectIds} = this.state;

        const newSelectIds = [...selectIds];
        if (e.target.checked) {
            newSelectIds.push(item.id)
        } else {
            newSelectIds.splice(newSelectIds.indexOf(item.id), 1)
        }
        this.setState({selectIds: newSelectIds});
    };

    checkAllToggle = (e: any) => {
        if (e.target.checked) {
            const selectIds = this.state.collectList.map((item) => {
                return item.id;
            });
            this.setState({selectIds});
        } else {
            this.setState({selectIds: []});
        }
    };

    render() {
        const {collectList, selectIds} = this.state;
        return (
            <div className={styles.container}>
                <Nav title={"我的收藏"}/>
                <div className={styles.content}>
                    {
                        collectList.map((item) => {
                            return <ListItem key={item.id} item={item} selectIds={selectIds} checkChange={(e: any) => {
                                this.checkboxChange(e, item);
                            }}/>
                        })
                    }
                </div>
                <div className={styles.footer}>
                    <CheckboxItem onChange={this.checkAllToggle}
                                  checked={collectList.length !== 0 && selectIds.length === collectList.length}><span
                        style={{fontWeight: 800}}>全选</span></CheckboxItem>
                    <Btn val={"取消收藏"} onClick={this.rmCollect}/>
                </div>
            </div>
        );
    }
}

export default Index
